import React, {Component} from "react";
import "./course_share.less";
import {BaseComponent} from "../base";
import TouchableOpacity from "@/components/TouchableOpacity/TouchableOpacity";
import CourseAPI from '@/api/course_api';


export default class CourseShareComponent extends BaseComponent {

    state = {
        isVerifyDisable: false,
        verifyTime: 60,
        verifyCode: '',
        mobile: ''
    };


    submit = async () => {
        let verifyCode = this.state.verifyCode;
        let mobile = this.state.mobile;
        if (mobile === '') {
            this.showFailToast("请输入正确的手机号码");
            return;
        }
        if (verifyCode === '') {
            this.showFailToast("请输入正确的验证码");
            return;
        }
        //发送验证码请求
        //验证码成功跳转页面
        let shareUserId = 32;
        let courseId = 1;

        let data = await CourseAPI.activateSharedCourse({courseId:courseId,mobile:mobile,code:verifyCode,shareUserId:shareUserId});
        if(data.isSuccess){
            this.showSuccessToast("提交成功");
            //跳转页面
            this.props.history.push("/course_share_success");
        }else{
            this.showFailToast(data.error);
        }
    };


    getVerifyCode =async () => {
        if (this.state.isVerifyDisable) {
            return;
        }

        let mobile = this.state.mobile;
        if(mobile===''){
            this.showFailToast("请输入正确的手机号");
            return;
        }


        this.setState({
            isVerifyDisable: true,
            verifyTime: 60
        });

        setInterval(() => {
            let data = {};
            data.verifyTime = this.state.verifyTime - 1;
            if (this.state.verifyTime <= 0) {
                data.isVerifyDisable = false;
            }
            this.setState(data);
        }, 1000);
        //发送验证码

        let data = await CourseAPI.getVerifyCode({mobile:mobile});
        if(data.isSuccess){
            //发送验证码成功
            
        }
    };


    render() {
        return (
            <main className="course-share-container">


                <div className="share-content">

                    <div className="share-title">

                        sss
                    </div>

                    <form className="share-form">
                        <div className="share-input-bg">
                            <input placeholder="手机号" name="mobile" onChange={this.handleChange.bind(this)}/>
                        </div>


                        <div className="share-input-bg">
                            <input className="verify-code-input" name="verifyCode" placeholder="验证码"
                                   onChange={this.handleChange.bind(this)}/>
                            <span className="verify-code-line">
                        </span>

                            <div className={`verify-code ${!this.state.isVerifyDisable ? '' : 'verify-disable'}`}
                                 onClick={this.getVerifyCode.bind(this)}>
                                {!this.state.isVerifyDisable ? '获取验证码' : this.state.verifyTime + '秒'}
                            </div>

                        </div>

                        <TouchableOpacity className="submit-btn" clickCallBack={this.submit} text={"立即领取"}>

                        </TouchableOpacity>

                    </form>
                </div>
            </main>
        );
    }
}